<template>
  <div class="recent-orders-container">
    <div class="header">
      <h3>最近订单</h3>
      <router-link to="/distributor/orders" class="view-more">查看更多 <i class="fas fa-chevron-right"></i></router-link>
    </div>
    
    <div class="orders-list">
      <div v-if="isLoading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载订单数据...</p>
      </div>
      
      <div v-else-if="orders.length === 0" class="empty-state">
        <i class="fas fa-receipt empty-icon"></i>
        <p>暂无订单数据</p>
      </div>
      
      <template v-else>
        <div v-for="order in orders" :key="order.id" class="order-item">
          <div class="order-info">
            <div class="order-main">
              <div class="order-id">{{ order.id }}</div>
            </div>
            <div class="order-details">
              <div class="order-date">
                <i class="far fa-calendar-alt"></i>
                {{ formatDate(order.date) }}
              </div>
            </div>
          </div>
          
          <div class="order-meta">
            <div class="order-amount">
              <span class="amount-label">金额</span>
              <span class="amount-value">{{ order.amount.toFixed(2) }} USDT</span>
            </div>
            <div class="order-status">
              <span class="status-badge" :class="getStatusClass(order.status)">
                {{ order.status }}
              </span>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { generateRecentOrders } from '@/utils/mockData';

interface Order {
  id: string;
  customer: string;
  date: string;
  amount: number;
  commission: number;
  status: string;
  items: number;
}

export default defineComponent({
  name: 'RecentOrdersList',
  
  setup() {
    const orders = ref<Order[]>([]);
    const isLoading = ref(true);
    
    // 获取数据
    onMounted(async () => {
      try {
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 800));
        orders.value = generateRecentOrders(5);
        isLoading.value = false;
      } catch (error) {
        console.error('获取订单数据失败', error);
        isLoading.value = false;
      }
    });
    
    // 格式化日期
    const formatDate = (dateString: string): string => {
      const date = new Date(dateString);
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(yesterday.getDate() - 1);
      
      // 如果是今天的订单
      if (date.toDateString() === today.toDateString()) {
        return `今天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 如果是昨天的订单
      if (date.toDateString() === yesterday.toDateString()) {
        return `昨天 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
      }
      
      // 其他日期
      return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
    };
    
    // 获取状态标签样式类
    const getStatusClass = (status: string): string => {
      switch (status) {
        case '已完成':
          return 'status-completed';
        case '配送中':
          return 'status-processing';
        case '已付款':
          return 'status-paid';
        case '已取消':
          return 'status-cancelled';
        default:
          return '';
      }
    };
    
    return {
      orders,
      isLoading,
      formatDate,
      getStatusClass
    };
  }
});
</script>

<style lang="scss" scoped>
.recent-orders-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eaeaea;
    
    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
    
    .view-more {
      font-size: 14px;
      color: #1989fa;
      text-decoration: none;
      display: flex;
      align-items: center;
      
      i {
        font-size: 12px;
        margin-left: 4px;
      }
      
      &:hover {
        color: #0056b3;
      }
    }
  }
  
  .orders-list {
    padding: 0;
  }
  
  .loading-state, .empty-state {
    padding: 40px 0;
    text-align: center;
    color: #999;
    
    .loading-spinner {
      width: 40px;
      height: 40px;
      margin: 0 auto 16px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #1989fa;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      color: #ddd;
    }
    
    p {
      margin: 0;
      font-size: 14px;
    }
  }
  
  .order-item {
    padding: 16px 20px;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background-color: #f5f7fa;
    }
  }
  
  .order-info {
    flex: 1;
  }
  
  .order-main {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    
    .order-id {
      font-weight: 500;
      color: #333;
      margin-right: 12px;
    }
  }
  
  .order-details {
    display: flex;
    font-size: 13px;
    color: #999;
    
    .order-date {
      display: flex;
      align-items: center;
      margin-right: 16px;
      
      i {
        margin-right: 4px;
        font-size: 12px;
      }
    }
  }
  
  .order-meta {
    text-align: right;
  }
  
  .order-amount {
    margin-bottom: 8px;
    
    .amount-label {
      font-size: 12px;
      color: #999;
      margin-right: 4px;
    }
    
    .amount-value {
      font-weight: 600;
      color: #333;
    }
  }
  
  .status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    
    &.status-completed {
      background-color: #e1f5eb;
      color: #27ae60;
    }
    
    &.status-processing {
      background-color: #e3f2fd;
      color: #2196f3;
    }
    
    &.status-paid {
      background-color: #e8f5e9;
      color: #43a047;
    }
    
    &.status-cancelled {
      background-color: #ffebee;
      color: #e53935;
    }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .order-item {
    flex-direction: column;
    align-items: flex-start;
    
    .order-meta {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 12px;
      text-align: left;
      
      .order-amount {
        margin-bottom: 0;
      }
    }
  }
}
</style> 